<template>
  <div class="hos">
    <div>
      <img src="./b1.png" alt class="yibiao" />
    </div>
    <div>
      <img src="./b2.png" alt class="zhizhen" :style="cls" />
    </div>

    <div class="kedu">
      <p class="kedu1">{{ -num }}</p>
      <p class="kedu2">{{ -num / 2 }}</p>
      <p class="kedu3">0</p>
      <p class="kedu4">{{ num / 2 }}</p>
      <p class="kedu5">{{ num }}</p>
    </div>
    <p class="title" style="fontSize:24px">
      <span v-if="!fuhao">-</span>
      {{ value }}
    </p>
  </div>
</template>
<script>
import { weiInt } from "@/utils/Methods";

export default {
  data() {
    return {
      num: 900,
      value: 0,
      cls: {
        transform: "rotate(55deg)",
        marginLeft: "97px"
      },
      kongData: "前进",
      // fuhao代表数字的正负
      fuhao: true
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(data, a, b) {
      this.com(data, a, b);
      if (this.value > 900) {
        this.value = 900;
      }
      if (this.fuhao) {
        this.cls.transform = `rotate(${(this.value / this.num) * 116}deg)`;
        // this.cls.marginLeft = `${98 - (this.value * 4) / this.num}px`;
      } else {
        this.cls.transform = `rotate(${(-this.value / this.num) * 116}deg)`;
        // this.cls.marginLeft = `${98 - (-this.value * 4) / this.num}px`;
      }
    },
    // 计算前进后退 a 是第一位 代表前进 b第二位代表后退
    com(data, a, b) {
      if (data === undefined) {
        this.kongData = "方向";
        this.fuhao = true;
      } else {
        let arr1 = Number(weiInt(data, a));
        let arr2 = Number(weiInt(data, b));
        let kong = "";
        if (arr1) {
          kong = "前进";
          this.fuhao = true;
        } else if (arr2) {
          kong = "后退";
          this.fuhao = false;
        } else {
          kong = "方向";
          this.fuhao = true;
        }
        this.kongData = kong;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.hos {
  font-size: 10px;
}
.kedu {
  position: relative;
  margin-top: -100px;
  margin-left: 40px;
}
.yibiao {
  max-width: 240px;
  max-height: 155px;
  z-index: 100;
}
.zhizhen {
  margin: -200px 0 0 0;
  max-width: 18px;
  max-height: 80px;
  z-index: 100;
  transform-origin: center 85%;
}
.kedu1 {
  position: absolute;
  margin-top: 30px;
  margin-left: -9px;
}
.kedu2 {
  position: absolute;
  margin-top: -19px;
  margin-left: -15px;
}
.kedu3 {
  position: absolute;
  margin-top: -44px;
  margin-left: 33px;
}
.kedu4 {
  position: absolute;
  margin-top: -21px;
  margin-left: 63px;
}
.kedu5 {
  position: absolute;
  margin-top: 31px;
  margin-left: 65px;
}
.title {
  font-size: 13px;
  margin: 40px 0 0 3px;
  text-align: center;
  width: 150px;
}
</style>
